import React from "react";
import { Input } from "antd";
import ParametersEditor from "components/ParametersEditor";
import NodePannel from "./NodePannel";
import styles from "./Pannel.less";
// import UsersTags from '../usersTags/UsersTags';
import FlowFormSelect from "../flowFormSelect";
import UserTaskDetail from "./UserTaskDetail";
import ScriptTaskDetail from "./ScriptTaskDetail";
import ServiceTaskDetail from "./ServiceTaskDetail";
import StartEndDetail from "./StartEndDetail";

class NodeSelected extends NodePannel {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: "1",
      label: "",
      description: "",
      // labelTooLong: false,
      overrideid: "",
      // idTooLong: false,
      formVisible: false,
      httpcallbackFormVisible: false,
      selectedSTAKeys: [],
      filList: [],
      // formSource:'',
    };
  }

  getDatas = (datas) => {
    // console.log(datas)
    // const { filList } = this.state
    // console.log(filList)
    this.setState({
      filList: datas,
    })

  }

  // Source = (data)=>{
  //   console.log(data)
  //   this.setState({
  //     formSource: data,
  //   })
  // }
  setFilList = (list) => {
    this.setState({
      filList: list,
    })
  }

  // 用户任务 选择渠道 已被去掉
  // componentDidMount() {
  //   const {selectedModel} = this.props;
  //   const { properties = {} } = (selectedModel || {}).model || {};
  //   console.log(selectedModel);
  //   this.setState({
  //     filList:properties?.formFields,
  //   })
  // }

  render() {
    const {
      label: inputingLabel,
      // labelTooLong,
      // idTooLong,
      formVisible,
      httpcallbackFormVisible,
      filList,
      // formSource,
    } = this.state;
    const {
      selectedModel = {},
      title,
      disable,
      dispatch,
      appId,
      busiId,
      modelProperties: { modelVariables = [] } = {},
      changeModelVariableRef,
      modelVariableRef,
      modelForms,
      updateModelForms,
      flowEditRef,
      modelProperties,
      customTitleList,
      checkInputUrl,
      testEvent,
      drawData,
    } = this.props;

    const { properties = {} } = (selectedModel || {}).model || {};
    const { shape = "" } = selectedModel;
    const labelValue =
      inputingLabel === "empty" ? "" : inputingLabel || selectedModel.label;
    const {
      formkeydefinition = "",
      formname = "",
      formId = "",
      httpcallback: httpcallbackData = {},
    } = properties;

    return (
      <div
        data-status="node-selected"
        className="pannel"
        id="node_detailpannel"
      >

        {shape === "UserTask" || shape === "AuditTask" ? (
          <UserTaskDetail
            appId={appId}
            changeModelVariableRef={changeModelVariableRef}
            modelVariableRef={modelVariableRef}
            checkOverrideid={this.checkOverrideid}
            disable={disable}
            dispatch={dispatch}
            modelVariables={modelVariables}
            selectedModel={selectedModel}
            handleChangeMultiProperties={this.handleChangeMultiProperties}
            handleChangeProperties={this.handleChangeProperties}
            handleChangeProperties2={this.handleChangeProperties2}
            handleformVisible={this.handleformVisible}
            handleFormSelect={this.handleFormSelect}
            handleGraphChange={this.handleGraphChange}
            handleHttpCallbackVisible={this.handleHttpCallbackVisible}
            handleUsersSelect={this.handleUsersSelect}
            handleDeleteUsers={this.handleDeleteUsers}
            handleRelationSelect={this.handleRelationSelect}
            handleDeleteRelation={this.handleDeleteRelation}
            modelForms={modelForms}
            formId={formId}
            updateModelForms={updateModelForms}
            onValueUpdate={this.handlePrePropChange}
            modelProperties={modelProperties}
            setFilList={this.setFilList}
            filList={filList}
            customTitleList={customTitleList}
            checkInputUrl={checkInputUrl}
            testEvent={testEvent}
            drawData={drawData}
          // formSource={formSource}
          />
        ) : shape === "ScriptTask" ? (
          <ScriptTaskDetail
            handleChangeProperties={this.handleChangeProperties}
            handleGraphChange={this.handleGraphChange}
            disable={disable}
            dispatch={dispatch}
            selectedModel={selectedModel}
            modelForms={modelForms}
          />
        ) : shape === "ServiceTask" ? (
          <ServiceTaskDetail
            handleChangeProperties={this.handleChangeProperties}
            handleGraphChange={this.handleGraphChange}
            disable={disable}
            dispatch={dispatch}
            selectedModel={selectedModel}
            modelForms={modelForms}
          />
        ) : shape === "StartNoneEvent" || shape === "EndNoneEvent" || shape === "GroupTaskStart" || shape === "GroupTaskEnd" ? (
          <StartEndDetail
            appId={appId}
            changeModelVariableRef={changeModelVariableRef}
            modelVariableRef={modelVariableRef}
            checkOverrideid={this.checkOverrideid}
            disable={disable}
            dispatch={dispatch}
            modelVariables={modelVariables}
            selectedModel={selectedModel}
            handleChangeMultiProperties={this.handleChangeMultiProperties}
            handleChangeProperties={this.handleChangeProperties}
            handleChangeProperties2={this.handleChangeProperties2}
            handleformVisible={this.handleformVisible}
            handleFormSelect={this.handleFormSelect}
            handleGraphChange={this.handleGraphChange}
            handleHttpCallbackVisible={this.handleHttpCallbackVisible}
            handleUsersSelect={this.handleUsersSelect}
            handleDeleteUsers={this.handleDeleteUsers}
            handleRelationSelect={this.handleRelationSelect}
            handleDeleteRelation={this.handleDeleteRelation}
            modelForms={modelForms}
            formId={formId}
            updateModelForms={updateModelForms}
            checkInputUrl={checkInputUrl}
            testEvent={testEvent}
          />
        ) : shape === "SequenceFlow" || shape === 'ExclusiveGateway' || shape === 'ParallelGateway'
        || shape === 'InclusiveGateway' ?
        (
          <>
            <div className={styles.headTitle}>
              {title || shape.includes("Gateway") ? "网关" : "事件"}
            </div>
            {/* <div className={`pannel-title ${styles.title}`}>
              {title || "节点"}
            </div> */}
            <div
              className={`block-container ${styles.content}`}
              style={{ marginTop: "16px" }}
            >
              <div className={styles.content_item}>
                <span className={styles.item_label}>名称：</span>
                <Input
                  disabled={disable}
                  placeholder="节点名称"
                  maxLength={10}
                  value={labelValue}
                  onChange={(ev) => this.handleChage("label", ev.target.value)}
                  onBlur={(ev) => {
                    this.handleGraphChange("label", ev.target.value);
                  }}
                />
              </div>
            </div>
          </>
        ) : <></>}
        {formVisible && (
          <FlowFormSelect
            dispatch={dispatch}
            visible={formVisible}
            // selectData={formkeydefinition}
            onCancel={() => this.handleformVisible(false)}
            // formSelect={this.handleFormSelect}
            selectFormData={{ formkeydefinition, formname }}
            formDetailSelect={this.handleFormSelect}
            externalFormDetailSelect={this.handleExternalFormSelect}
            extraParam={{ busiId, appId }}
            selectedModel={selectedModel}
            isNodes
            flowEditRef={flowEditRef}
            modelProperties={modelProperties}
            getDatas={this.getDatas}
          // Source={this.Source}

          />
        )}
        {/* httpcallbackFormVisible && ( */}
        {httpcallbackFormVisible && (
          <ParametersEditor
            // dispatch={dispatch}
            visible={httpcallbackFormVisible}
            // visible={true}
            selectData={httpcallbackData}
            onCancel={() => this.handleHttpCallbackVisible(false)}
            formSelect={this.handleHttpCallbackFormSelect}
          />
        )}
      </div>
    );
  }
}
export default NodeSelected;
